<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="/js/vue.js"></script>
		<script src="/js/jquery-3.1.1.min.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
		.login-one{
		  /*background-color:#767b65;*/
			background: linear-gradient(to top, #8aa084,#6a8762);
		  background-size: cover;
		  background-repeat:no-repeat;
		  overflow:hidden;
		  height: 100%;
		}
		  .el-header, .el-footer {
		    color: white;
			padding-top: 10px;

		  }

		  .el-main {
	/* 		 background-image:url(../image/bj.jpg); */
			  overflow: hidden;
			 height: 100%;
		  }
		  .el-container{
			  height: 100%;
		  }
		  html,body{
			 height: 100%; 
			 margin: 0px;
		  }
		</style>
	</head>
	<body>
		<div id="app" style="height: 100%;">
			<el-container>
			  <el-header class="login-one">
				  <el-col :span="8">
					     <span style="font-size: xx-large;font-family: 幼圆;font-weight: bold;">草药园</span>
				  </el-col>
				  <el-col :span="8">
						<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
				  </el-col>
					  <el-col :span="8" align="right" >
						  <el-button type="success" size="mini">修改密码</el-button>
						  <el-button type="success" size="mini" @click="update(x.row)">个人信息设置</el-button>
						  <el-button type="success" size="mini" @click="exit">退出登录</el-button>
						  <el-avatar size="small" :src="circleUrl"></el-avatar>
	<!--						登录用户名绑定-->
						  <span >{{userName}}</span>
					  </el-col>
			  </el-header>

<!--				左侧菜单栏-->
			  <el-container>
					<el-menu :default-openeds=['1'] class="el-menu-vertical-demo" style="width: 200px;">

						<el-menu-item @click="toUrl('default.html','首页')">
							<!--图标-->
							<i class="el-icon-s-home"></i>
							<span>首页</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('employee_list.html','用户权限')">
							<i class="el-icon-user-solid"></i>
							<span>用户权限</span>
						</el-menu-item>
						<el-menu-item @click="toUrl('shop.html','商品管理')">
							<i class="el-icon-s-shop"></i>
							<span>商品管理</span>
						</el-menu-item>

						<el-menu-item @click="toUrl('salary.html','物流管理')">
							<i class="icon el-icon-s-order" style="font-size: 20px;margin-right: 10px;"></i>
							<span>物流管理</span>
						</el-menu-item>

						<el-menu-item @click="toUrl('contract_list.html','报表管理')">
							<i class="icon el-icon-s-data" style="font-size: 20px; margin-right: 10px;"></i>
							<span>报表管理</span>
						</el-menu-item>

					</el-menu>
			
			    <el-main>
				<el-tag
				 type="warning"
				@click="openUrl(tag.url)"
				  :key="tag.name"
				  v-for="tag in tags"
				  closable
				  :disable-transitions="false"
				  @close="handleClose(tag.name)" style="position:relative;top:-20px;left: -20px;cursor: pointer;">
				  {{tag.name}}
				</el-tag>
					<iframe :src="url" height="100%" width="100%" style="border: solid 0px;">
					</iframe>
				</el-main>
			  </el-container>
			</el-container>
		</div>
	</body>

	<script>
			new Vue({
				el:"#app",
				data:{
					tags: [{name:"系统首页",url:"default.html"}],
					url:"default.html",
					// 用户名字的图标
					circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
					//新定义用户页面跳转
					userName:"",

				},
				methods:{

					 toUrl:function(url,name){
						 this.url = url;
						 var is = false;
						 for (var i=0;i<this.tags.length;i++){
							 if(this.tags[i].name==name){
								 is = true;
							 }
						 }
						if(is==false){
							this.tags.push({"name":name,"url":url});
						}
					 },
					handleClose(name) {
					    if(name=="系统首页"){
							this.$message({
								message:"系统首页不能关闭",
								type:"error"
							})
							return;
						}
						var is = false;
						 for (var i=0;i<this.tags.length;i++){
							 if(this.tags[i].name==name){
								   this.tags.splice(this.tags.indexOf(this.tags[i]), 1);
							 }
						 }
						
						this.url="default.html";
					},
					openUrl:function(url){
						this.url = url;
					},

					//退出登录
					exit(){
						window.location.href="login.html";
					}
				},

				mounted(){
					// 一打开则有用户名显示
					this.userName = localStorage.getItem("name");
				}
			})
	
	</script>
</html>
